<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>配件互换</title>
<meta name="decorator" content="default" />
<style>
#importBox_goods {
	position: fixed;
	padding: 0 15px;
	width: 400px;
	background: #FFF;
	top: 10%;
	left: 25%;
	margin: 0 auto;
	border: 1px solid #CCC;
	box-shadow: 3px 3px 10px 4px #DDD;
	z-index: 9999;
}

#importBox_goods .ib_bottom {
	margin-bottom: 35px;
}

.partsSelect {
	width: 200px;
}

.partsDiv {
	margin-bottom: 10px;
}
</style>
<script type="text/javascript">
	var subFlag = true;
	
	$(function(){
		if("${returnMessage}" != ""){
			showTip("${resultMessage}", "", 3000,0);
		}
	})
	
	function page(n, s) {
		$("#pageNo").val(n);
		$("#pageSize").val(s);
		$("#searchForm").submit();
		return false;
	}

	function shows() {//显示弹框
		$("#importBox_goods").show();
		addInt();//初始化弹框
	}
	
	function modifyShows(list) {//显示弹框
		$("#importBox_goods").show();
		modifyInt(list);
	}
	
	function confirm_imbox() {
		$("#forms").submit();
	}

	function close_imbox() {
		$("#importBox_goods").hide();
	}

	var partsIndex = 0;//slelect个数
	
	function addInt(){//初始化弹框方法
		partsIndex = 0;//初始化select个数
		$("#groupId").val("");
		$("#partsArea").empty();//清除弹框中所有select
		appendParts();//添加一个select
	}
	
	function modifyInt(list){//初始化弹框方法
		partsIndex = 0;//初始化select个数
		$("#groupId").val(list[0].groupId);
		$("#partsArea").empty();//清除弹框中所有select
		for(var i=0;i<list.length;i++){
			modifyAppendParts(list[i].partsCode);
		}
	}
	
	function appendParts() {//添加一个select
		if(partsIndex == 0){
			partsIndex += 1;
			$("#partsArea").append(createPartsDiv(partsIndex));
			$("#partsCode_" + partsIndex).select2();
			//$("#partsCode_" + partsIndex).on("select2-focus", function(e) { 
				//$(this).empty();
			//})
		}else{
			//所有的select有值才允许创建新的
			var $selectArray = $("#partsArea select");
			var createFlag = true;
			for(var i=0;i< $selectArray.length ;i++){
				if($($selectArray.get(i)).select2().val() == null || $($selectArray.get(i)).select2().val() =="" ){
					createFlag = false;
				}
			}
			if(createFlag){
				partsIndex += 1;
				$("#partsArea").append(createPartsDiv(partsIndex));
				$("#partsCode_" + partsIndex).select2();
			}else{
				alert("请先填写所有配件号");
			}
		}
	}

	function modifyAppendParts(partsCode) {
			partsIndex += 1;
			$("#partsArea").append(createPartsDiv(partsIndex));
			$("#partsCode_" + partsIndex).select2();
			$("#partsCode_" + partsIndex).append("<option value='"+partsCode+"'>"+partsCode+"</option>");
			$("#partsCode_" + partsIndex).select2().val(partsCode).trigger("change");
	}
	
	function removeParts(index) {//移除一个select
		$("#partsDiv_"+index).remove();
	}

	function searchParts(index) {//点击“搜”执行的内容
		if(subFlag){
			var searchVal = $("#partsCode_" + index).data('select2').search.val();
			if(searchVal==""){
				$("#partsCode_" + index).empty();
				$("#partsCode_" + index).append("<option value=''>请输入配件号</option>");
				$("#partsCode_" + index).select2().val("").trigger("change");
				return;
			}
			$("#partsCode_" + index).empty();
			$("#partsCode_" + index).append("<option value=''>正在读取中...</option>");
			$("#partsCode_" + index).select2().val("").trigger("change");
			subFlag = false;
			$.ajax({
				url : "${ctx}/sys/partschange/form",
				data : {
					"code" : searchVal
				},
				//async:false,
				dataType : "json",
				type : "post",
				success : function(data) {
					if (data.resultCode == "1") {
						$("#partsCode_" + index).empty();
						for(var i=0;i<data.list.length;i++){
							$("#partsCode_" + index).append("<option value='"+data.list[i].code+"'>"+data.list[i].code+"</option>");
						}
						if(data.list.length>0){
							$("#partsCode_" + index).select2().val(data.list[0].code).trigger("change");
							$("#partsCode_" + index).select2("open");
						}else{
							$("#partsCode_" + index).append("<option value=''>没有搜索到匹配项</option>");
							$("#partsCode_" + index).select2().val("").trigger("change");
						}
						
					}
					subFlag = true; 
			},
				error : function() {
					subFlag = true;
					alert("网络异常");
				}
			});
		}
	}

	function createPartsDiv(num) {//创建select相关元素
		return '<div id="partsDiv_'+num+'" class="partsDiv">'
				+ '<select id="partsCode_'+num+'" name="partsCode" class="partsSelect"></select>&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onclick="searchParts('
				+ num
				+ ')" value="搜"/>&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onclick="removeParts('
				+ num + ')" value="-"/>' + '</div>';
	}
	

	function modify(groupId) {
		$.ajax({
			url : "${ctx}/sys/partschange/toModify",
			data : {
				"groupId" : groupId
			},
			//async:false,
			dataType : "json",
			type : "post",
			success : function(data) {
				modifyShows(data.list);
			},
			error : function() {
				alert("网络异常");
			}
		});
	}
	
	function del(obj,groupId){
		if(!subFlag){
			loading('正在提交，请稍等...');
			return;
		}
		if(confirm('确定删除该可互换配件组？')){
			obj.href = "${ctx}/sys/partschange/delete?groupId="+groupId;
		}else{
			return false;
		}
		subFlag = false;
	}
</script>

</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="${ctx}/sys/partschange/">退换货登记列表</a></li>
	</ul>
	<form:form id="searchForm" modelAttribute="partsChange"
		action="${ctx}/sys/partschange/" method="post"
		class="breadcrumb form-search">
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}" />
		<input id="pageSize" name="pageSize" type="hidden"
			value="${page.pageSize}" />
		<ul class="ul-form">

			<li><label>配件编号：</label> <form:input path="partsCode"
					htmlEscape="false" maxlength="50" class="input-medium" /></li>
			<li class="btns"><input id="" class="btn btn-primary"
				type="submit" value="查询" /></li>
			<li class="btns"><input id="" class="btn btn-primary"
				type="button" value="新增" onclick="shows()" /></li>
			<li class="clearfix"></li>
		</ul>
	</form:form>
	<sys:message content="${message}" />
	<table id="contentTable"
		class="table table-striped table-bordered table-condensed">
		<thead>
			<tr>
				<th>序号</th>
				<th>可互换配件组</th>
				<shiro:hasPermission name="sys:partschange:edit">
					<th>操作</th>
				</shiro:hasPermission>
			</tr>
		</thead>
		<tbody>
			<c:forEach items="${page.list}" var="bean" varStatus="status">
				<tr>
					<td>${status.index+1}</td>
					<td>${bean.groupPartsCode}</td>
					<shiro:hasPermission name="sys:partschange:edit">
						<td><a href="javascript:void(0)" onclick="modify('${bean.groupId}')">修改</a>
						<a href="javascript:void(0)" onclick="del(this,'${bean.groupId}')">删除</a></td>
					</shiro:hasPermission>
				</tr>
			</c:forEach>
		</tbody>
	</table>
	<div class="pagination">${page}</div>

	<!-- 弹框 -->
	<div id="importBox_goods" class="hide">
		<form action="${ctx}/sys/partschange/save" method="post" id="forms">
			<input type="hidden" id="ordersCode" name="orderCode" value="" /> <input
				type="hidden" id="userId" name="userId" value="" />
			<div style="margin-top: 20px;" class="clearfix">
				<div style="float: left">可互换配件号:</div>
				<div style="float: left">
					<input type="hidden" id="groupId" name="groupId" />
					<div id="partsArea" style="float: left">
						
					</div>
					<div>
						<input type="button" onclick="appendParts()" value="+" />
					</div>
				</div>
			</div>

		</form>
		<div class='ib_bottom'>
			<input id="btnCancel" class="btn" type="button" style='' value="确定"
				onclick="confirm_imbox()" /> <input id="btnCancel" class="btn"
				type="button" style='margin-left: 200px;' value="取消"
				onclick="close_imbox()" />
		</div>
	</div>
</body>
</html>